<template>
  <view class="cat-list">
    <maya-empty v-if="list.length === 0 && finished"></maya-empty>
    <block v-else>
      <maya-waterfall
        :key="areaId"
        ref="waterfall"
        v-model="list"
      >
        <!-- <template v-slot:left="{leftList}">
          <block
            v-for="item in leftList"
            :key="item.petId">
            <cat-item
              :data="item"
              :width="width" />
          </block>
        </template> -->
        <!-- <template v-slot:right="{rightList}">
          <block
            v-for="item in rightList"
            :key="item.petId">
            <cat-item
              :data="item"
              :width="width" />
          </block>
        </template> -->
      </maya-waterfall>
      <maya-load-more v-if="finished" />
    </block>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import mayaWaterfall from '@/components/maya-myWaterfall.vue';
import mayaLoadMore from '@/components/maya-load-more.vue';
import storage from '@/utils/storage';
import { getCatList } from '@/api/recommend.js';
import { getTikTokOpenId } from '@/api/common.js';
export default {
  components: {
    mayaWaterfall,
    // catItem,
    mayaLoadMore,
  },
  props: {
    areaId: {
      type: String,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      width: '100%',
      page: {
        current: 1,
        size: 20,
      },
      hasRefresh: false,
      finished: false, // 列表是否已经全部加载完成
    };
  },
  computed: {
    ...mapGetters(['token']),
  },
  watch: {
    token() {
      this.hasRefresh = true;
    },
  },
  mounted() {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    });
    // 如果没有devId, 则进行获取
    if (!storage.devId.get()) {
      // 获取js_code
      uni.login().then(({ code }) => {
        this.getOpenId(code);
      });
    } else {
      this.getList();
    }
    uni.$on('homeOnShow', this.onRefresh);
    uni.$on('adoptSuccess', this.getList);
  },
  // 复用组件
  // beforeDestroy() {
  //   uni.$off('homeOnReachBottom');
  //   uni.$off('homeOnShow');
  //   uni.$off('adoptSuccess');
  // },
  methods: {
    async onRefresh() {
      if (this.hasRefresh) {
        this.page.current = 1;
        await this.getList();
        this.$refs.waterfall.init();
      }
    },
    async getList() {
      try {
        this.loading = true;
        const params = {
          ...this.page,
          areaId: this.areaId,
          devId: storage.devId.get(),
        };
        const { data } = await getCatList(params);
        const list = [];
        data.records.forEach((item) => {
          list.push({
            ...item,
            id: this.areaId + item.petId,
            file: JSON.parse(item.files)[0],
          });
        });
        if (params.current === 1) {
          this.list = list;
        } else {
          this.list = this.list.concat(list);
        }
        // 标识是否全部加载完成
        this.finished = data.records.length < this.page.size;
        this.loading = false;
        this.hasRefresh = false;
        uni.hideLoading();
      } catch (e) {
        uni.hideLoading();
        this.loading = false;
        throw new Error(e);
      }
    },
    loadMore() {
      if (this.loading || this.finished) {
        return;
      }
      this.page.current += 1;
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
      this.getList();
    },
    async getOpenId(code) {
      try {
        const { data } = await getTikTokOpenId(code);
        storage.devId.set(data);
        this.getList();
      } catch (e) {
        //TODO handle the exception
        this.getList();
        throw new Error(e);
      }
    },
    render() {
      this.$refs.waterfall.splitData();
    },
  },
};
</script>

<style lang="scss">
.cat-list {
  height: 90vh;
}
.empty {
  height: 80vh;
}
</style>
